<template>
  <div>
    <div class="card-container">
      <div class="card" v-for="(o,index) in list" :key="index">
        <div class="img-box">
          <span class="counter">{{o.playCount | filterCount}}</span>
          <img v-lazy="o.coverImgUrl||o.picUrl" width="180" height="180" @click="toSonglist(o)" />
        </div>
        <p class="desc">{{ o.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ['sheetlist', 'dafultpage'],
  methods: {
    toSonglist (o) {
      this.$router.push({
        name: "showlist",
        query: {
          id: o.id,
        }
      })
    }
  },
  computed: {
    list () {
      return this.sheetlist
    },
    page () {
      return this.dafultpage
    }
  },
  filters: {
    filterCount (count) {
      let res = parseInt(count / 10000)
      return `${res}万`
    }
  }
}
</script>

<style lang="scss">
.card-container {
  display: flex;
  user-select: none;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: pointer;

  .card {
    flex-basis: 180px;
    margin-bottom: 12px;

    .img-box {
      height: 180px;
      position: relative;

      .counter {
        position: absolute;
        width: 100%;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        text-align: right;
        right: 0;
        color: white;
        padding-right: 8px;
        background: linear-gradient(to right, transparent, transparent, #333);
      }
    }

    .desc {
      margin: 0;
      padding: 10px 0;
      font-size: 14px;
      text-align: left;
    }
  }
}
</style>